<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>管理后台</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 自定义Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6', // 蓝色主色调
                        secondary: '#f97316', // 橙色辅助色
                        movie: '#3b82f6', // 电影模块蓝色
                        book: '#10b981', // 图书模块绿色
                        neutral: {
                            100: '#f3f4f6',
                            200: '#e5e7eb',
                            700: '#374151',
                            800: '#1f2937',
                            900: '#111827'
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .btn-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5;
            }
            .form-input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
<!-- 导航栏 -->
<nav class="bg-white shadow-md sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-6">
            <a href="<%= request.getContextPath() %>/cjj/admin_dashboard.jsp" class="text-primary font-medium flex items-center border-b-2 border-primary pb-0.5">
                <i class="fa fa-tachometer mr-2"></i> 管理后台
            </a>
            <a href="<%= request.getContextPath() %>/cjj/admin_dashboard.jsp" class="text-neutral-700 hover:text-primary transition-colors">
                <i class="fa fa-home mr-1"></i> 首页
            </a>
            <div class="relative group">
                <a href="#" class="text-neutral-700 hover:text-primary transition-colors flex items-center">
                    <i class="fa fa-film mr-1"></i> 电影管理 <i class="fa fa-chevron-down ml-1 text-xs"></i>
                </a>
                <div class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10 hidden group-hover:block pointer-events-auto">
                    <a href="<%= request.getContextPath() %>/cjj/publish_movie.jsp" class="block px-4 py-2 text-sm text-neutral-700 hover:bg-movie hover:text-white">发布电影</a>
                    <a href="<%= request.getContextPath() %>/cjj/manage_movies.jsp" class="block px-4 py-2 text-sm text-neutral-700 hover:bg-movie hover:text-white">管理电影</a>
                </div>
            </div>
            <div class="relative group">
                <a href="#" class="text-neutral-700 hover:text-primary transition-colors flex items-center">
                    <i class="fa fa-book mr-1"></i> 图书管理 <i class="fa fa-chevron-down ml-1 text-xs"></i>
                </a>
                <div class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10 hidden group-hover:block pointer-events-auto">
                    <a href="<%= request.getContextPath() %>/cjj/publish_book.jsp" class="block px-4 py-2 text-sm text-neutral-700 hover:bg-book hover:text-white">发布图书</a>
                    <a href="<%= request.getContextPath() %>/cjj/manage_books.jsp" class="block px-4 py-2 text-sm text-neutral-700 hover:bg-book hover:text-white">管理图书</a>
                </div>
            </div>
            <a href="<%= request.getContextPath() %>/cjj/manage_admins.jsp" class="text-neutral-700 hover:text-primary transition-colors">
                <i class="fa fa-users mr-1"></i> 管理管理员
            </a>
        </div>
        <div class="flex items-center space-x-4">
                <span class="text-neutral-700">
                    <i class="fa fa-user-circle mr-1"></i>
                    <%= (String)request.getSession().getAttribute("adminUsername") %>
                </span>
            <a href="<%= request.getContextPath() %>/admin/logout" class="text-neutral-700 hover:text-red-500 transition-colors">
                <i class="fa fa-sign-out mr-1"></i> 退出
            </a>
        </div>
    </div>
</nav>

<!-- 主内容区 -->
<main class="container mx-auto px-4 py-8">
    <!-- 页面标题 -->
    <div class="bg-gradient-to-r from-primary/10 to-primary/5 rounded-xl p-6 mb-8">
        <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-800">管理后台概览</h1>
        <p class="text-neutral-600 mt-2">欢迎回来，<%= (String)request.getSession().getAttribute("adminUsername") %>！这是您的管理控制台</p>
    </div>

    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <!-- 电影总数 -->
        <div class="bg-white rounded-xl p-6 card-shadow hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-neutral-500 text-sm">电影总数</p>
                    <h3 class="text-3xl font-bold text-neutral-800 mt-1">1,245</h3>
                    <p class="text-green-500 text-sm mt-2 flex items-center">
                        <i class="fa fa-arrow-up mr-1"></i> 较上月增长 12%
                    </p>
                </div>
                <div class="bg-movie/10 p-4 rounded-lg">
                    <i class="fa fa-film text-2xl text-movie"></i>
                </div>
            </div>
        </div>

        <!-- 图书总数 -->
        <div class="bg-white rounded-xl p-6 card-shadow hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-neutral-500 text-sm">图书总数</p>
                    <h3 class="text-3xl font-bold text-neutral-800 mt-1">3,872</h3>
                    <p class="text-green-500 text-sm mt-2 flex items-center">
                        <i class="fa fa-arrow-up mr-1"></i> 较上月增长 8%
                    </p>
                </div>
                <div class="bg-book/10 p-4 rounded-lg">
                    <i class="fa fa-book text-2xl text-book"></i>
                </div>
            </div>
        </div>

        <!-- 活跃用户 -->
        <div class="bg-white rounded-xl p-6 card-shadow hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-neutral-500 text-sm">活跃用户</p>
                    <h3 class="text-3xl font-bold text-neutral-800 mt-1">12,548</h3>
                    <p class="text-green-500 text-sm mt-2 flex items-center">
                        <i class="fa fa-arrow-up mr-1"></i> 较上月增长 15%
                    </p>
                </div>
                <div class="bg-secondary/10 p-4 rounded-lg">
                    <i class="fa fa-users text-2xl text-secondary"></i>
                </div>
            </div>
        </div>

        <!-- 今日访问 -->
        <div class="bg-white rounded-xl p-6 card-shadow hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-neutral-500 text-sm">今日访问</p>
                    <h3 class="text-3xl font-bold text-neutral-800 mt-1">2,874</h3>
                    <p class="text-red-500 text-sm mt-2 flex items-center">
                        <i class="fa fa-arrow-down mr-1"></i> 较昨日下降 3%
                    </p>
                </div>
                <div class="bg-neutral-100 p-4 rounded-lg">
                    <i class="fa fa-eye text-2xl text-neutral-700"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- 最近活动 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
        <!-- 最近添加的电影 -->
        <div class="bg-white rounded-xl p-6 card-shadow lg:col-span-2">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-xl font-bold text-neutral-800">最近添加的电影</h2>
                <a href="<%= request.getContextPath() %>/cjj/manage_movies.jsp" class="text-primary hover:text-primary/80 text-sm">查看全部</a>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-neutral-200">
                    <thead class="bg-neutral-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">封面</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">标题</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">导演</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">上映日期</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">状态</th>
                    </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-neutral-200">
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <img src="https://picsum.photos/seed/movie1/60/90" alt="电影封面" class="w-12 h-18 object-cover rounded">
                        </td>
                        <td class="px-6 py-4 text-sm text-neutral-800">流浪地球2</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-800">郭帆</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-500">2023-01-22</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">热映中</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <img src="https://picsum.photos/seed/movie2/60/90" alt="电影封面" class="w-12 h-18 object-cover rounded">
                        </td>
                        <td class="px-6 py-4 text-sm text-neutral-800">满江红</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-800">张艺谋</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-500">2023-01-22</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">热映中</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <img src="https://picsum.photos/seed/movie3/60/90" alt="电影封面" class="w-12 h-18 object-cover rounded">
                        </td>
                        <td class="px-6 py-4 text-sm text-neutral-800">无名</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-800">程耳</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-500">2023-01-22</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">即将上映</span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 最近活动日志 -->
        <div class="bg-white rounded-xl p-6 card-shadow">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-xl font-bold text-neutral-800">最近活动</h2>
                <a href="#" class="text-primary hover:text-primary/80 text-sm">查看全部</a>
            </div>

            <div class="space-y-4">
                <div class="flex items-start">
                    <div class="flex-shrink-0 bg-green-100 p-2 rounded-full">
                        <i class="fa fa-plus text-green-600"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-neutral-800">
                            <span class="font-medium">管理员</span> 添加了新电影 <span class="font-medium">"流浪地球2"</span>
                        </p>
                        <p class="text-xs text-neutral-500 mt-1">2小时前</p>
                    </div>
                </div>

                <div class="flex items-start">
                    <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full">
                        <i class="fa fa-edit text-blue-600"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-neutral-800">
                            <span class="font-medium">管理员</span> 更新了图书 <span class="font-medium">"三体"</span> 的信息
                        </p>
                        <p class="text-xs text-neutral-500 mt-1">5小时前</p>
                    </div>
                </div>

                <div class="flex items-start">
                    <div class="flex-shrink-0 bg-red-100 p-2 rounded-full">
                        <i class="fa fa-trash text-red-600"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-neutral-800">
                            <span class="font-medium">管理员</span> 删除了电影 <span class="font-medium">"XXXX"</span>
                        </p>
                        <p class="text-xs text-neutral-500 mt-1">昨天</p>
                    </div>
                </div>

                <div class="flex items-start">
                    <div class="flex-shrink-0 bg-green-100 p-2 rounded-full">
                        <i class="fa fa-plus text-green-600"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-neutral-800">
                            <span class="font-medium">管理员</span> 添加了新图书 <span class="font-medium">"人类简史"</span>
                        </p>
                        <p class="text-xs text-neutral-500 mt-1">昨天</p>
                    </div>
                </div>

                <div class="flex items-start">
                    <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full">
                        <i class="fa fa-user-plus text-blue-600"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-neutral-800">
                            <span class="font-medium">管理员</span> 添加了新管理员账户 <span class="font-medium">"new_admin"</span>
                        </p>
                        <p class="text-xs text-neutral-500 mt-1">2天前</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 图表和趋势 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- 月度统计 -->
        <div class="bg-white rounded-xl p-6 card-shadow lg:col-span-2">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-xl font-bold text-neutral-800">月度内容统计</h2>
                <div class="flex space-x-2">
                    <button class="px-3 py-1 text-xs font-medium text-neutral-700 bg-neutral-100 rounded-md hover:bg-neutral-200">周</button>
                    <button class="px-3 py-1 text-xs font-medium text-white bg-primary rounded-md">月</button>
                    <button class="px-3 py-1 text-xs font-medium text-neutral-700 bg-neutral-100 rounded-md hover:bg-neutral-200">年</button>
                </div>
            </div>

            <div class="h-80">
                <!-- 图表占位 -->
                <div class="flex items-center justify-center h-full text-neutral-400">
                    <i class="fa fa-bar-chart text-6xl mr-4"></i>
                    <div>
                        <p class="text-lg font-medium">图表将在这里显示</p>
                        <p class="text-sm">实际项目中会集成Chart.js等图表库</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 内容分布 -->
        <div class="bg-white rounded-xl p-6 card-shadow">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-xl font-bold text-neutral-800">内容分类分布</h2>
                <a href="#" class="text-primary hover:text-primary/80 text-sm">查看详情</a>
            </div>

            <div class="h-64">
                <!-- 饼图占位 -->
                <div class="flex items-center justify-center h-full text-neutral-400">
                    <i class="fa fa-pie-chart text-6xl mr-4"></i>
                    <div>
                        <p class="text-lg font-medium">饼图将在这里显示</p>
                        <p class="text-sm">实际项目中会集成Chart.js等图表库</p>
                    </div>
                </div>
            </div>

            <div class="mt-6 space-y-3">
                <div class="flex items-center">
                    <div class="w-3 h-3 rounded-full bg-movie mr-2"></div>
                    <span class="text-sm text-neutral-700">电影</span>
                    <span class="ml-auto text-sm font-medium text-neutral-800">35%</span>
                </div>
                <div class="flex items-center">
                    <div class="w-3 h-3 rounded-full bg-book mr-2"></div>
                    <span class="text-sm text-neutral-700">图书</span>
                    <span class="ml-auto text-sm font-medium text-neutral-800">52%</span>
                </div>
                <div class="flex items-center">
                    <div class="w-3 h-3 rounded-full bg-secondary mr-2"></div>
                    <span class="text-sm text-neutral-700">其他</span>
                    <span class="ml-auto text-sm font-medium text-neutral-800">13%</span>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-white border-t border-neutral-200 py-6">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="text-neutral-600 text-sm mb-4 md:mb-0">
                © 2025 影视图书管理系统. 保留所有权利.
            </div>
            <div class="flex space-x-4">
                <a href="#" class="text-neutral-600 hover:text-primary transition-colors">
                    <i class="fa fa-question-circle mr-1"></i> 帮助中心
                </a>
                <a href="#" class="text-neutral-600 hover:text-primary transition-colors">
                    <i class="fa fa-envelope mr-1"></i> 联系我们
                </a>
                <a href="#" class="text-neutral-600 hover:text-primary transition-colors">
                    <i class="fa fa-file-text-o mr-1"></i> 使用条款
                </a>
            </div>
        </div>
    </div>
</footer>

<!-- JavaScript -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        console.log('Dashboard Page Loaded');

        // 导航栏下拉菜单优化
        const dropdowns = document.querySelectorAll('.group');
        dropdowns.forEach(dropdown => {
            const menu = dropdown;
            const submenu = dropdown.querySelector('.hidden');

            // 鼠标进入菜单或下拉框时显示下拉框
            menu.addEventListener('mouseenter', () => {
                submenu.classList.remove('hidden');
            });

            // 鼠标离开菜单时延迟隐藏下拉框
            menu.addEventListener('mouseleave', () => {
                setTimeout(() => {
                    submenu.classList.add('hidden');
                }, 200);
            });

            // 鼠标进入下拉框时取消隐藏延迟
            submenu.addEventListener('mouseenter', () => {
                clearTimeout(hideTimeout);
            });

            // 鼠标离开下拉框时重新设置隐藏延迟
            submenu.addEventListener('mouseleave', () => {
                setTimeout(() => {
                    submenu.classList.add('hidden');
                }, 200);
            });
        });
    });
</script>
</body>
</html>